// 添加和编辑 国际机构-机构课程 弹窗
import React, { Component } from 'react'
import { Button,Form, Input, Modal, Select,Upload ,Icon ,message ,DatePicker ,Spin,InputNumber} from 'antd'
import { connect } from 'react-redux'
import moment from 'moment';
/* 引用接口文档路径 */
import {
  addMachineryCourse,editMachineryCourse
} from 'actions/companyManage'
const FormItem = Form.Item

@Form.create({
    mapPropsToFields(props) {
      return {
        name: Form.createFormField({
          ...props.content,
          value: props.content.name,
        }),
        description: Form.createFormField({
          ...props.content,
          value: props.content.description,
        }),
        price: Form.createFormField({
          ...props.content,
          value: props.content.price,
        }),
        address: Form.createFormField({
          ...props.content,
          value: props.content.address,
        }),
  
      };
    } 
})

@connect(
  (state, props) => ({
    config: state.config,
    userInfoList: state.userInfoList,
  })
)


export default class ModalAddIndustryAssociation extends Component {
  
    constructor (props) {
      super(props)
      this.state = {
        addIconImg:"",//课程图标
        loading:false
      }
    }

    /*
      执行一次，在初始化render之前执行，如果在这个方法内调用setState，render()知道state发生变化，并且只执行一次
    */
    componentWillMount(){
      var endTimes = new Date();
      this.setState({
        addIconImg: this.props.content.iconPath,
        courseTime: this.props.content.courseTime ? this.props.content.courseTime : endTimes
      })
    }

    courseTimeFn(value){
      if(value){
        value = value._d.format("yyyy-MM-dd hh:mm:ss") 
      }else{
        value = ""
      }
      this.setState({courseTime:value})
    }

    addReportSubmit(callback,e){//新增和编辑确定按钮
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if(!err){
                if(!this.state.addIconImg){
                  message.error('请上传课程图标');
                  return;
                }
                if(this.props.type == 1){
                  var datajson = {
                      "institutionId":this.props.institutionId,//机构ID
                      "iconPath":this.state.addIconImg,//课程LOGO
                      "name":values.name,//课程名称
                      "description":values.description,//课程说明
                      "price":values.price,//课程价格
                      "courseTime":this.state.courseTime,//课程时间
                      "address":values.address,//课程地址
                  }
                  //新增              
                  this.props.dispatch(addMachineryCourse(
                  datajson,
                  (respose) => {
                      message.success(respose.respMsg);
                      callback&&callback()
                      this.props.ModalCancel();
                  }))
                }else{
                    var datajson = {
                      "id":this.props.content.id,//课程
                      "iconPath":this.state.addIconImg,//课程LOGO
                      "name":values.name,//课程名称
                      "description":values.description,//课程说明
                      "price":values.price,//课程价格
                      "courseTime":this.state.courseTime,//课程时间
                      "address":values.address,//课程地址
                    }
                    //编辑
                    this.props.dispatch(editMachineryCourse(
                    datajson,
                    (respose) => {
                        message.success(respose.respMsg);
                        callback&&callback()
                        this.props.ModalCancel();
                    })) 
                }                                
            }
        });       
    }

    render () {
        const { getFieldDecorator } = this.props.form;
        const content = this.props.content;
        const dateFormat = 'YYYY/MM/DD';
        const uploadImg = {
            name: 'file',
            action: global.$GLOBALCONFIG.$ctx+'image/full/path/upload',
            headers: {
              authorization: 'holder ' + sessionStorage.getItem('token'),
            },
            data:{
                type:"1"
            },
            accept:"image/jpg,image/png,image/jpeg",
            beforeUpload: (file)=>{
              const isImg = file.type.substring(0,5) === 'image';
              if (!isImg) {
                message.error('请选择图片');
              }
              this.setState({
                loading:true,
              }) 
              return isImg;
            },
            onChange:(info)=>{
              if (info.file.status !== 'uploading') {
              }
              if (info.file.status === 'done') {
                /* 把返回的路径赋值过去 */
                this.setState({
                  addIconImg: info.file.response.respData,
                  loading:false
                })
              } else if (info.file.status === 'error') {
                message.error(info.file.response.respMsg);
              }
            },
            showUploadList:false,//不展示上传完成之后的文件列表
        }
        const formItemLayout = {
          labelCol: {
            xs: { span: 24 },
            sm: { span: 4 },
          },
          wrapperCol: {
            xs: { span: 24 },
            sm: { span: 16 },
          },
        };
        return (
            <Modal
                maskClosable={false}
                visible={this.props.ModalFlg}
                title={this.props.type == '1' ? "新增课程" : "编辑课程" }
                onCancel={this.props.ModalCancel}
                onOk={this.addReportSubmit.bind(this,this.props.callback)}
                destroyOnClose={true}
            >
            <div>
              <Form>
                <FormItem label="课程图标" {...formItemLayout}>
                    <Spin spinning={this.state.loading} style={{width:"80px"}}>
                      <img style={{width:"80px",height:"80px",verticalAlign:"bottom",marginRight:"10px"}} 
                              src={this.state.addIconImg ? this.state.addIconImg :require('../../images/baseImg.png')}
                      />
                    </Spin>                    
                    <Upload {...uploadImg}>                
                        <Button>点击选择图片</Button>
                    </Upload>  
                </FormItem>
                <FormItem label="课程名称" {...formItemLayout}>
                  {
                    getFieldDecorator('name', {
                    rules: [{
                        required: true,message:"请输入课程名称"
                      }],
                    })(
                      <Input placeholder="请输入关键字"   size="default" style={{ width: '180px' }} />
                    )
                  }                 
                </FormItem>
                <FormItem label="课程说明" {...formItemLayout}>
                  {
                    getFieldDecorator('description', {
                    rules: [{
                        required: true,message:"请输入课程说明"
                      }],
                    })(
                      <Input placeholder="请输入关键字" size="default" style={{ width: '200px' }} />
                    )
                  }  
                </FormItem>
                <FormItem label="课程价格" {...formItemLayout}>
                  {/* 富文本 */}
                  {
                    getFieldDecorator('price', {
                    rules: [{
                        required: true,message:"请输入课程价格"
                      }],
                    })(
                      <InputNumber min={1} placeholder="请输入关键字"  size="default" style={{ width: '180px' }} />       
                    )
                  }
                </FormItem>
                <FormItem label="课程时间" {...formItemLayout}>
                  <DatePicker defaultValue={moment(this.state.courseTime, 'YYYY-MM-DD')} onChange={this.courseTimeFn.bind(this)} format={dateFormat} />
                </FormItem>
                <FormItem label="举办地址" {...formItemLayout}>
                  {
                    getFieldDecorator('address', {
                    rules: [{
                        required: false,
                      }],
                    })(
                      <Input placeholder="请输入关键字" size="default" style={{ width: '200px' }} />
                    )
                  }  
                </FormItem>
                
              </Form>
            </div>
          </Modal>
        )
    }
}